<template>
  <el-card>
    <div style="display: flex;flex-wrap: wrap;justify-content: space-between">
      <div @click="toBookDetail(item)" style="width: 20%;height: 280px;margin: 10px 20px;border:1px solid" v-for="item in hotBookBox" :key="item.bo_number">
        <img :src="item.b_cover" style="width: 100%;height: 230px;margin-bottom: 10px">
        <div style="display: flex; justify-content: center; align-items: center;">
          <p style="margin-right: 10px;">{{item.b_name}}</p>
          <p style="margin-right: 10px;">{{item.bt_name}}</p>
          <span  style="background-color: transparent; padding: 5px 10px; font-weight: bold; color: #ff6347;">{{item.b_price}}元</span>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      hotBookBox: []
    }
  },
  mounted() {
    this.getNewBookBox()
  },
  methods: {
    async getNewBookBox() {
      const {data: res} = await this.$axios.get('/book/hotBookBox')
      console.log(res)
      this.hotBookBox = res.data
    },
    toBookDetail(item){
      //跳转到书籍详情页
      let b_id = item.b_id;
      this.$router.push({path:"book_detail",query:{b_id}})

    },
  }
}
</script>

<style scoped>

</style>